<rxa-visualizer>
  <div visualizerHeader>
    <h2>rxLet Template Triggers</h2>
    <div class="d-flex">
      <rxa-strategy-select
        (strategyChange)="strategy$.next($event)"
      ></rxa-strategy-select>
      <div class="ml-2">
        <div class="mb-2">
          <strong>Stream</strong>
        </div>
        <rxa-value-provider
          #valueProvider
          [buttons]="true"
        ></rxa-value-provider>
      </div>
      <div class="ml-2">
        <div class="mb-2"><strong>Trigger</strong></div>
        <rxa-trigger-provider #triggerProvider></rxa-trigger-provider>
      </div>
    </div>
  </div>
  <div class="row w-100">
    <div class="col-6">
      <h2>Context Variables</h2>
      <ng-container
        *rxLet="
          valueProvider.incremental$;
          let state;
          let c = complete;
          let s = suspense;
          let e = error;
          nextTrigger: triggerProvider.next$;
          completeTrigger: triggerProvider.complete$;
          errorTrigger: triggerProvider.error$;
          suspenseTrigger: triggerProvider.suspense$
        "
      >
        @if (c) {
          <div>
            <mat-icon class="complete-icon">thumb_up</mat-icon>
            <h2>Completed!</h2>
          </div>
        }
        @if (s) {
          <ng-template
            [ngTemplateOutlet]="suspense"
            [ngTemplateOutletContext]="{
              $implicit: state
            }"
          ></ng-template>
        }
        @if (e) {
          <ng-template
            [ngTemplateOutlet]="error"
            [ngTemplateOutletContext]="{
              $implicit: state,
              $error: e
            }"
          ></ng-template>
        }

        <div>{{ state }}</div>
      </ng-container>
    </div>
    <div class="col-6">
      <h2>Template Bindings</h2>
      <ng-container
        *rxLet="
          valueProvider.incremental$;
          let state;
          error: error;
          suspense: suspense;
          complete: complete;
          nextTrigger: triggerProvider.next$;
          completeTrigger: triggerProvider.complete$;
          errorTrigger: triggerProvider.error$;
          suspenseTrigger: triggerProvider.suspense$
        "
      >
        <div>{{ state }}</div>
      </ng-container>
    </div>
    <ng-template #error let-value let-error="$error">
      <div>
        <mat-icon class="error-icon">thumb_down</mat-icon>
        <h2>Error value: {{ error }}</h2>
        <strong>Last valid value: {{ value }}</strong>
      </div>
    </ng-template>
    <ng-template #suspense let-value>
      <mat-progress-spinner
        [diameter]="80"
        [color]="'primary'"
        [mode]="'indeterminate'"
      ></mat-progress-spinner>
      <strong>Last valid value: {{ value }}</strong>
    </ng-template>
    <ng-template #complete let-value>
      <div>Completed!</div>
    </ng-template>
  </div>
</rxa-visualizer>
